<template>
  <div id="playercontent">
    <div id="dplayerV" @dblclick="fullScreen"></div>
  </div>
</template>

<script>
import Hls from 'hls.js'
import DPlayer from 'dplayer';

export default {
  props: {
    playParam: Object,
    pointData: '',
  },
  data() {
    return {
      videoCurrentTime: '',
      videoUrl: '',
      isFullScreen: false,
    };
  },
  watch: {
    pointData(nv, ov) {
      this.$nextTick(() => {
        this.initDPlayer();
        this.getCurrentTime();
      })
      return nv
    },
  },
  metgids: {},
  mounted() {
    this.$nextTick(() => {
      this.initDPlayer();
      this.getCurrentTime();
    })
  },

  methods: {
    initDPlayer() {
      this.videoUrl = this.playParam.play_url;


      // console.log(this.playParam)
      // this.showQuality();
      const hls = new Hls();
      const dp = {
        container: document.getElementById('dplayerV'),
        //播放器的一些参数
        autoplay: true,                                                   //视频自动播放
        theme: '#FADFA3',                                                 //主题色
        loop: false,                                                      //视频循环播放
        lang: 'zh-cn',                                                    //语言
        screenshot: true,                                                 //开启截图，如果开启，视频和视频封面需要允许跨域
        hotkey: true,                                                     //开启热键，支持快进、快退、音量控制、播放暂停
        preload: 'auto',                                                  //视频预加载，可选值: 'none', 'metadata', 'auto'
        // logo: require('logo.png'),                                     //左上角logo
        volume: 0.7,                                                      //默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效
        mutex: true,                                                      //互斥，阻止多个播放器同时播放，当前播放器播放时暂停其他播放器
        playbackSpeed: [0.5, 0.75, 1, 1.25, 1.5, 2],                      //可选的播放速率，可以设置成自定义的数组
        video: {                                                          //视频信息
          url: this.videoUrl,                                             //视频链接    
          type: 'customHls',                                              //可选值: 'auto', 'hls', 'flv', 'dash', 'webtorrent', 'normal' 或其他自定义类型, 见#MSE 支持
          customType: {
            customHls: function (video, player) {
              hls.loadSource(video.src);
              hls.attachMedia(video);
            },
          },
          // pic: 'dplayerV.png',                                             //视频封面
          // thumbnails: 'thumbnails.jpg',                                //视频缩略图，可以使用 DPlayer-thumbnails (opens new window)生成
          quality: this.qulity,
          defaultQuality: 0,
        },
        highlight: this.pointData,                                       //高亮点（打点功能）
      };
      this.playerV = new DPlayer(dp);
      this.playerV.play();
      // console.log(player)
    },
    getCurrentTime() {
      let _this = this
      this.playerV.video.ontimeupdate = function () {
        _this.videoCurrentTime = parseInt(_this.player.video.currentTime)
      }

    },
    fullScreen() {
      if(this.isFullScreen){
        this.playerV.fullScreen.cancel('browser');
        this.isFullScreen = false;
      }else{
        this.playerV.fullScreen.request('browser');
        this.isFullScreen = true;
      }
    },
    // showQuality() {
    //   let qualityAll = [                                                     //清晰度
    //     {
    //       name: '480P',
    //       url: this.options['480P'],
    //       type: 'customHls',
    //     },
    //     {
    //       name: '720P',
    //       url: this.options['720P'],
    //       type: 'customHls',
    //     },
    //     {
    //       name: '1080P',
    //       url: this.options['1080P'],
    //       type: 'customHls',
    //     },
    //     {
    //       name: '原视频',
    //       url: this.options.pc_play_url,
    //       type: 'customHls',
    //     },]
    //   if (this.options['1080P']) {
    //     this.qulity.push(qualityAll[2])
    //   }
    //   if (this.options['720P']) {
    //     this.qulity.push(qualityAll[1])
    //   }
    //   if (this.options['480P']) {
    //     this.qulity.push(qualityAll[0])
    //   }
    //   if (this.qulity.length == 0) {
    //     this.qulity.push(qualityAll[3])
    //   }

    // },

  },

}
</script>
<style scoped>
#playercontent {
  height: 100%;
}

#dplayerV /deep/ .dplayerV-video-current {
  width: auto;
  height: 100%;
  margin: auto auto;
}

#dplayerV /deep/ .dplayerV-video-wrap {
  height: 100%;
}

#dplayerV /deep/ .dplayerV-video {
  height: 100%;
}

#dplayerV {
  height: 100%;
}
</style>